<style scoped lang='less'>
    .five-admin {
        .selected-search-components{
            .select-click{
                width: 25% !important;
                margin-bottom: 20px;
            }
        }
    }
</style>
<template>
    <div class="five-admin">
        <Tabs type="card">
            <Tab-pane label="图表显示">
                <div id="charname"  style="width: 900px;height:700px;"></div>
            </Tab-pane>
            <Tab-pane label="数据显示">
                <Table :context="self" :data="tableData" :columns="tableColumns" stripe border></Table>
            </Tab-pane>
        </Tabs>
    </div>
</template>
<script>
    import apiUtil from '../../assets/utils/api_util';

    export default {
        data() {
            return {
                self: this,
                tableData: [],
                charArr:[],
                tableColumns: [
                    {
                        title: '标题',
                        key: 'title',
                        align: 'center',

                    },
                    {
                        title: '副标题',
                        key: 'subtitle',
                        align: 'center',
                    },
                    {
                        title: '封面',
                        align: 'center',
                        key: 'faceimgurl',
                        render: (h, params) => {
                            return h('div', [
                                h('img', {
                                    attrs: {
                                        src: apiUtil.urls.baseUrl + params.row.faceimgurl
                                    },
                                    style: {
                                        width: '80px',
                                    },
                                    on: {
                                        click: () => {
                                            this.preview(params.index);
                                        }
                                    }
                                }),
                            ])
                        }
                    },
                    {
                        title: '浏览量',
                        key: 'viewcount',
                        align: 'center',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 220,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.id,'NewsEdit')
                                            }
                                        }
                                    }, '编辑'),
                                    h('Button', {
                                        props: {
                                            type: 'success',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                this.jumpPage(params.row.id,'NewsDetail')
                                            }
                                        }
                                    }, '详情'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            'margin-right': '10px',
                                        },
                                        on: {
                                            click: () => {
                                                console.log("轮播id：",params.row.id);
                                                this.remove(params.row.id)
                                            }
                                        }
                                    }, '删除')
                                ]
                            )
                        }
                    }
                ]
            }
        },
        created: function () {
            this.getCharData();
            // this.mockTableData();
        },
        components: {},
        methods: {
            mockTableData() {
                let that = this;

                let para = {
                    areaId:'',
                    current: this.current,
                    limit: 7,
                };
                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that,apiUtil.urls.MingList, para, function (res) {
                    that.$Loading.finish();
                    that.total = res.Msg.TotalCount;
                    that.current = res.Msg.CurrentPage;
                    that.tableData = res.Msg.Arrays;

                    console.log('tableData:', res);

                    that.tableData.forEach(function (item, i) {
                        that.images.push(that.apiUtilBase + item.faceimgurl);
                        console.log("图片:",that.images)
                    });
                });

            },
            getCharData:function(){
                let that = this;

                let para = {
                    listTypeName:"粮秣给养"
                };

                let params = that.$qs.stringify(para);

                this.$Loading.start();

                apiUtil.get(that,apiUtil.urls.GetSixListData, para, function (res) {
                    that.$Loading.finish();

                    that.charArr = res.Msg;
                    that.drawChartWh();

                });
            },
            //生成统计图
            drawChartWh() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById("charname"));
                let that = this;

                let option = {
                    title: {
                        text: '满编率',
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    legend: {
                        data: []
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'value',
                        boundaryGap: [0, 0.01]
                    },
                    yAxis: {
                        type: 'category',
                        data: that.charArr.TypeData
                    },
                    series: that.charArr.Data
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option, "light");
            },
        }
    }
</script>
